Me encontré con este error de tiempo de ejecución que dice que setState no está definido cuando intenté conectarme a mi red de prueba Rinkeby en Metamask. He intentado enlazar usando accesorios de constructor pero eso no funciona. No sé qué hacer. Aquí está mi código:
import React, { Component } from 'react' import { Button, Form, Input, Grid, Message } from 'semantic-ui-react' import Layout from '../../components/Layout' import factory from '../../ethereum/factory' import web3 from '../../ethereum/web3' import { Router } from '../../routes' class New extends React.Component { constructor(props) { super(props); this.state = { minimumContribution: '', errorMessage: '', loading: false } this.onSubmit = this.onSubmit.bind(this); } onSubmit = async event => { event.preventDefault() const accounts = await web3.eth.getAccounts() this.setState({ loading: true, errorMessage: '' }) try { await factory.methods.createCampaign(this.state.minimumContribution).send({ from: accounts[0] }); Router.pushRoute('/') } catch (error) { this.setState({ errorMessage: error.message }) } this.setState({ loading: false }) } render() { const { errorMessage, loading } = this.state return ( <Layout> <Grid centered columns={2}> <Grid.Column> <h3>Create a Campaign.</h3> <Form onSubmit={this.onSubmit} error={!!errorMessage}> <Form.Field> <lable>Minimum Contribution </lable> <Input label="WEI" labelPosition="right" value={this.state.minimumContribution} onChange={event=>this.setState({minimumContribution:event.target.value})} /> </Form.Field> <Message error header="Oops!" content={errorMessage}/> <Button loading={loading} primary>Create</Button> </Form> </Grid.Column> </Grid> </Layout> ) } } export default NewSi ayuda, estoy siguiendo un curso de ethereum en Udemy (Ethereum and Solidity: The Complete Developer's Guide). El error ocurre en la conferencia 190.
Parece que el contexto 'este' se está perdiendo.
agregar un nuevo método usando la función de flecha
handleChange = event => this.setState({minimumContribution:event.target.value})Consulte esa función en onChange
onChange={this.handleChange}Debe usar async onSubmit (event) { y no onSubmit = async event => { .
El primero declara un método mientras que el segundo inicializa una propiedad de clase con una función de flecha. Las funciones de flecha no tienen su propio this (y no, el enlace no cambiará eso), por this que se utilizará el ámbito circundante, que será el ámbito global (el bloque class no es un ámbito per se, ya que no puede contener code), y el alcance global this no está undefined y, por lo tanto, su código actualmente falla al acceder a this.setState .
eliminar this.onSubmit = this.onSubmit.bind(this); del constructor si desea utilizar propiedades de clase. para obtener más información, consulte ¿Cómo usar funciones de flecha (campos de clase pública) como métodos de clase?